<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑幻灯片信息</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/style.min.css?v=4.1.0" rel="stylesheet">
<link href="${pageContext.request.contextPath}/jQuery-Validation/css/validationEngine.jquery.css" rel="stylesheet">
<style type="text/css">
    .formErrorContent{color: red;}
</style>
</head>

<body class="gray-bg">
<div class="formErrorContent"></div>
    <div class="container" style="margin-top: 20px">
        <form class="form-horizontal" role="form" id="editSlideShowForm" autocomplete="off">
                <input type="hidden" name="slideId" id="slideId">
                <div class="form-group">
                    <label class="col-sm-4 control-label">排序:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control validate[required,custom[onlyNumberSp]]" name="slideOrder" id="slideOrder" placeholder="排序" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">图片:</label>
                    <div class="col-sm-4">
                    	<input type="text" class="form-control validate[required]" name="slideImgName" id="slideImgName" readonly="readonly" placeholder="图片">
                    </div>
                </div>
                <div class="form-group" style="margin-left: 150px;margin-top: 50px">
                    <div class="col-sm-6  control-label">
                        <button type="button" class="btn btn-default" onclick="closeForm();">关闭</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;<button type="submit" class="btn btn-primary" id="save">保存</button>
                    </div>
                </div>
         </form>
    </div>
<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/js/content.min.js?v=1.0.0"></script>
<script src="${pageContext.request.contextPath}/js/plugins/layer/layer.min.js"></script>
<script src="${pageContext.request.contextPath}/js/public/ttbj-core.js"></script>
<script src="${pageContext.request.contextPath}/jQuery-Validation/js/jquery.validationEngine.js"></script>
<script src="${pageContext.request.contextPath}/jQuery-Validation/js/jquery.validationEngine-zh_CN.js"></script>

<script type="text/javascript">
var slideId;
$(function () {
	slideId = $.getUrlParam("slideId");
    //是否验证成功
    $('#editSlideShowForm').validationEngine('attach', {
        validationEventTrigger : 'blur',
        promptPosition: 'inline',
        scroll: false,
        focusFirstField : true,
        onValidationComplete : function (form, valid) {
            if (valid){
                if (slideId == 'null') {
                	addSlideShowInfo();
                } else {
                	modifySlideShowInfo();
                }
            }
        }
    });
    
  	//选择图片
    $("#slideImgName").focus(function(){
    	//加载所有配置的幻灯片
    	$.ajax({
    		url : "../slideshow/getSlideImgNames.htm",
    		cache : false,
    		type : "get",
    		dataType : "json",
    		beforeSend : function() {layer.load(0, {shade : false});},
    		complete : function() {layer.closeAll("loading");},
    		success : function(result) {
    			if (result.status == 0) {
    				var data = result.data;
    				var liHtml = '';
    				for(var i=0; i < data.length; i++){
    					liHtml += '<li><div class="radio"><label><input type="radio" name="optionsRadios" value="' + data[i] + '"> <img src="${pageContext.request.contextPath}/img/slideshow/' + data[i] +'" style="height: 60px; width: 60px;"/></label></div> </li>'
    				}
    				if(liHtml != ''){
    					var index = layer.open({
        					type: 0,
        				    title: '所有图片',
        				    closeBtn: 0,
        					closeBtn:1, 
        				    shadeClose: true,
        				    content: '<ol>' + liHtml + '</ol>',
        					yes: function(index, layero){	//点击确定按钮的回调
        						$('#slideImgName').val($('input:radio:checked').val());		//把选择的那张图片的名字赋给slideImgName输入框
        						layer.close(index);
        					}
        				});
    				}
    				return;
    			}
    		}
    	});
    });
    
    
    //如果truckId为null，则是增加操作，否则是编辑操作.
    //这个地方使用的return，后面的语句将执行不到
    if(slideId == 'null'){
    	return;
    }else{
    	echoSlideShowInfo();
    }
});

//点击编辑回显数据
function echoSlideShowInfo(){
    $.ajax({
        url: "../slideshow/echoSlideShowById.htm",
        cache: false,
        type: "get",
        dataType: "json",
	    data: {"slideId": slideId},
        success: function (result) {
            if (result.status == 0) {
                var data = result.data;
                $("#editSlideShowForm").formatForm(data);
                return;
            }
        }
    });
}

//关闭窗口
function closeForm() {
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    parent.layer.close(index);
}

//修改幻灯片信息
function modifySlideShowInfo(){
    $.ajax({
        url: "../slideshow/modifySlideShowInfo.htm",
        cache: false,
        type: "post",
        dataType: "json",
        data : $("#editSlideShowForm").serialize(),
        beforeSend:function(){var index = layer.load(1, { shade: [0.8,'#ddd']});},
        complete:function(){var index = layer.closeAll("loading");},
        success: function (result) {
            if (result.status == 0) {
                parent.layer.msg(result.message, {icon: 1});
                parent.$table.bootstrapTable('refresh', {url: '../slideshow/getSlideShowMag.htm'});
            } else {
                parent.layer.msg(result.message, {icon: 2});
            }
            closeForm();
        }
    });
}

//增加幻灯片信息
function addSlideShowInfo() {
    $.ajax({
        url: "../slideshow/addToSlideShowInfo.htm",
        cache: false,
        type: "post",
        dataType: "json",
        data: $("#editSlideShowForm").serialize(),
        beforeSend:function(){var index = layer.load(1, { shade: [0.8,'#ddd']});},
        complete:function(){var index = layer.closeAll("loading");},
        success: function (result) {
            if (result.status == 0) {
                parent.layer.msg(result.message, {icon: 1});
                parent.$table.bootstrapTable('refresh', {url: '../slideshow/getSlideShowMag.htm'});
                closeForm();
            } else {
                parent.layer.msg(result.message, {icon: 2});
                closeForm();
            }
        }
    });
}
</script>
</body>
</html>